<template>
	<view class="container">
		<view class="form-box">
			<view class="form-item">
				<view class="item-label">姓名：</view>
				<view class="item-input">
					<input v-model="formData.name" />
				</view>
			</view>
			<view class="form-item">
				<view class="item-label">手机号：</view>
				<view class="item-input">
					<input v-model="formData.phone" />
					<view class="send-code" @tap="sendCode">发送验证码</view>
				</view>
			</view>
			<view class="form-item">
				<view class="item-label">验证码：</view>
				<view class="item-input">
					<input v-model="formData.code" />
				</view>
			</view>
			<view class="form-item">
				<view class="item-label">身份证：</view>
				<view class="item-input">
					<input v-model="formData.idcard" />
				</view>
			</view>
			<view class="item-tips">
				注：请确保你填写的信息准确无误
			</view>
			<view class="submit-btn" @tap="doSubmit">注册</view>
		</view>
	</view>
</template>

<script>
	import { myRequest, showToastMsg } from '../../utils'
	
	export default {
		data() {
			return {
				loading: false,
				scene: '',
				formData: {
					parentId: 0,
					name: '',
					phone: '',
					code: '',
					idcard: '',
					nickName: '',
					avatar: '',
					gender: '',
					type: 1 // 学生
				},
				mobileReg: /^1[3456789]\d{9}$/,
				idcardReg: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
			}
		},

		onLoad() {
			
			let userInfo = uni.getStorageSync('wechatUserInfo')
			this.formData.nickName = userInfo.nickName
			this.formData.avatar = userInfo.avatarUrl
			this.formData.gender = userInfo.gender
			
			this.scene = uni.getStorageSync('scene')
			if (this.scene.length <= 0) {
				uni.showModal({
					title: '提示',
					content: '场景信息异常，请重新扫描二维码',
					showCancel: false
				})
				return
			}
			let sceneArr = this.scene.split('_')
			if (sceneArr.length < 2) {
				uni.showModal({
					title: '提示',
					content: '场景信息异常，请重新扫描二维码',
					showCancel: false
				})
				return
			}
			this.formData.parentId = sceneArr[1]
			uni.removeStorageSync('scene')
			
		},

		methods: {

			sendCode() {
				const that = this
				
				if (that.formData.phone.length <= 0) {
					return showToastMsg("请输入手机号")
				}
				if (!that.mobileReg.test(that.formData.phone)) {
					return showToastMsg("请输入正确的手机号")
				}
				
				if (that.loading) {
					return
				}
				
				that.loading = true
				uni.showLoading({
					title: '发送中'
				})
				
				let success = function(res) {
					that.loading = false
					uni.hideLoading()
					if (res.data.code != 20000) {
						return showToastMsg(res.data.message)
					}
					showToastMsg(res.data.message)
				}
				
				let param = {
					url: '/no-login/sendcode',
					data: {phone: that.formData.phone}
				}
				
				myRequest(param, success)
			},
			
			doSubmit() {
				const that = this
				let d = that.formData
				
				if (d.avatar.length <= 0) {
					return showToastMsg('没有获取到您的微信头像')
				}
				if (d.nickName.length <= 0) {
					return showToastMsg('没有获取到您的微信昵称')
				}
				if (d.name.length <= 0) {
					return showToastMsg('请输入姓名')
				}
				if (d.phone.length <= 0) {
					return showToastMsg('请输入手机号')
				}
				if (!that.mobileReg.test(d.phone)) {
					return showToastMsg('请输入正确的手机号')
				}
				if (d.code.length <= 0) {
					return showToastMsg('请输入手机验证码')
				}
				if (d.idcard.length <= 0) {
					return showToastMsg('请输入身份证号')
				}
				if (!that.idcardReg.test(d.idcard)) {
					return showToastMsg('请输入正确的身份证号')
				}
				
				if (that.loading) {
					return
				}
				
				that.loading = true
				uni.showLoading({
					title: '正在注册'
				})
				
				let success = function(res) {
					that.loading = false
					uni.hideLoading()
					if (res.data.code != 20000) {
						return showToastMsg(res.data.message)
					}
					showToastMsg(res.data.message)
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}
				
				let param = {
					url: '/no-login/register',
					data: that.formData
				}
				
				myRequest(param, success)
			}
		
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}

	.container {
		width: 750rpx;
		height: auto;
	}

	.form-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
	}

	.form-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 50rpx;
	}
	
	.item-label {
		color: #333333;
		font-size: 30rpx;
	}

	.item-input {
		width: 480rpx;
		height: 72rpx;
		border-radius: 36rpx;
		border: solid 1rpx #666666;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 10rpx;
	}

	.item-input input {
		font-size: 30rpx;
		color: #333333;
		margin-left: 10rpx;
	}

	.item-input-idcard {
		width: 480rpx;
		height: 72rpx;
		border-radius: 36rpx;
		border: solid 1rpx #666666;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 10rpx;
	}

	.item-input input {
		height: 72rpx;
	}

	.item-tips {
		width: 386rpx;
		font-size: 20rpx;
		color: #f83609;
		margin-top: 20rpx;
	}

	.send-code {
		color: #ffffff;
		font-size: 24rpx;
		width: 168rpx;
		height: 54rpx;
		background-color: #5683ec;
		border-radius: 26.5rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.submit-btn {
		width: 606rpx;
		height: 88rpx;
		background-color: #5683ec;
		border-radius: 44rpx;
		color: #ffffff;
		font-size: 36rpx;
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
